import React from 'react';

interface CardProps {
  children: React.ReactNode;
  className?: string;
}

const Card: React.FC<CardProps> = ({ children, className = '' }) => {
  const baseClasses = 'rounded-lg border border-border-light dark:border-border-dark bg-white dark:bg-slate-900 shadow-sm';
  const classes = `${baseClasses} ${className}`;

  return <div className={classes}>{children}</div>;
};

interface CardContentProps {
  children: React.ReactNode;
  className?: string;
}

const CardContent: React.FC<CardContentProps> = ({ children, className = '' }) => {
  const baseClasses = 'p-4';
  const classes = `${baseClasses} ${className}`;

  return <div className={classes}>{children}</div>;
};

interface CardDescriptionProps {
  children: React.ReactNode;
  className?: string;
}

const CardDescription: React.FC<CardDescriptionProps> = ({ children, className = '' }) => {
  const baseClasses = 'text-sm text-slate-700 dark:text-slate-400';
  const classes = `${baseClasses} ${className}`;

  return <p className={classes}>{children}</p>;
};

interface CardFooterProps {
  children: React.ReactNode;
  className?: string;
}

const CardFooter: React.FC<CardFooterProps> = ({ children, className = '' }) => {
  const baseClasses = 'flex items-center p-4 pt-0';
  const classes = `${baseClasses} ${className}`;

  return <div className={classes}>{children}</div>;
};

interface CardHeaderProps {
  children: React.ReactNode;
  className?: string;
}

const CardHeader: React.FC<CardHeaderProps> = ({ children, className = '' }) => {
  const baseClasses = 'flex flex-col space-y-1.5 p-4';
  const classes = `${baseClasses} ${className}`;

  return <div className={classes}>{children}</div>;
};

interface CardTitleProps {
  children: React.ReactNode;
  className?: string;
}

const CardTitle: React.FC<CardTitleProps> = ({ children, className = '' }) => {
  const baseClasses = 'text-lg font-semibold leading-none tracking-tight';
  const classes = `${baseClasses} ${className}`;

  return <h3 className={classes}>{children}</h3>;
};

export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };